import React, { Component } from 'react';
import InfiniteScroll from 'react-infinite-scroller';
import { SearchBar } from 'antd-mobile';
import './selectDataTypeId.scss';
import api from 'js/api/index';
import { Treebeard } from 'react-treebeard';
import { i18n } from 'js/core/i18n';

class Item extends Component {
  constructor() {
    super();
    this.state = {
      open: false
    }
  }
  open = () => {
    this.setState({ open: !this.state.open })
  }
  select = (data) => {
    if (this.props.modelData && this.props.modelData.onChange) {
      this.props.modelData.onChange(data);
      window.FW.emit('back');
    }
  }
  render() {
    let data = this.props.data;
    return <div className={"item " + this.props.className}>
      <div className="itemName flex">
        <div className="flex flex-g-1" onClick={this.open}>
          <div className="treeicon flex-center">
            {data.Children && data.Children.length > 0 && <div className="icon-content">{this.state.open ? '-' : '+'}   </div>}
          </div>
          <div className="flex">{data.Name}</div>
        </div>
        <div className="select" onClick={() => this.select(data)}>{i18n.get("请选择")}</div>
      </div>
      <div className={(this.state.open ? '' : 'hidden')}>
        {data.Children && data.Children.length > 0 && data.Children.map(item => {
          return <Item key={item.DataTypeID} data={item} modelData={this.props.modelData} />
        })}
      </div>
    </div>
  }
}

class SelectDataTypeId extends Component {
  constructor() {
    super();
    this.state = {
      data: []
    }
  }
  componentDidMount() {
    this.getData();
  }

  getData = () => {
    api('/BaseSet/OrgDataTree', { IsHave: 0 }).then((data) => {
      console.log(data)
      this.setState({ data: data.data })
    })
  }
  render() {
    let { data } = this.state;
    return <div id="selectDataTypeId" className="flex-col">
      <div className="box">
        {data.map(item => {
          return <Item className="pl5" data={item} modelData={this.props.modelData} />
        })}
      </div>
    </div>
  }
}

export default SelectDataTypeId;